var watcher = "";
var data1 = [];
var date1 = [];

function render(ele) {
    console.log(ele)
    watcher = ele;
    data1 = [];
    date1 = [];
}
var first = true;
// 打开一个WebSocket:
var myChart = echarts.init(document.getElementById('main'));
var ws = new WebSocket("#{ws_path}");

// 响应onmessage事件:
ws.onmessage = function (msg) {
    try {
        var data = JSON.parse(msg.data);
        //console.log(data)
        if (first) {
            for (var temp in data) {
                $("#table1").append("<tr id=\"" + temp + "\">" + "</tr>")
            }
            first = false;
        }
        if (watcher != "") {

            date1.push(new Date())
            data1.push(data[watcher].status.rx)
            var option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date1
                },
                yAxis: {
                    boundaryGap: [0, '50%'],
                    type: 'log',
                    min: 1,
                    logBase: 2
                },
                series: [{
                    name: '速度',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    stack: 'a',
                    areaStyle: {
                        normal: {}
                    },
                    data: data1
                }]
            }
            myChart.setOption(option);
        }
        for (var temp in data) {
            //$("#"+temp).remove()
            var date = new Date(data[temp].status.time * 1000);
            if (watcher != "" && temp == watcher) {
                date1.push(date)
                data1.push(data[temp].status.rx)
                myChart.setOption({
                    xAxis: {
                        data: date1
                    },
                    series: [{
                        name: '速度',
                        data: data1
                    }]
                });
            }
            var interval = (Date.now() - data[temp].status.time * 1000);
            var server_down = "在线";
            var status_color = "green";
            if (interval > 5000 && interval <= 10000) {
                server_down = "失联";
                status_color = "blue";
            } else if (interval > 10000) {
                server_down = "离线";
                status_color = "red"
            }
            var txt1 = "<td> <button type=\"button\" onclick=\"render(" + temp + ")\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#staticBackdrop\">" + data[temp].name + "</button>" + "</td>" + "<td>" + data[temp].status.mem + "</td>" + "<td>" + data[temp].status.tx + "</td>" + "<td>" + data[temp].status.rx + "</td>" + "<td>" + date.toLocaleString() + "</td>" + "<td id=\"" + temp + "status" + "\">" + "<font face=\"arial\" color=\"" + status_color + "\">" + server_down + "</font>" + "</td>"
            $("#" + temp).html(txt1);

        }
    } catch (e) {
        //console.log(msg)
        console.log(e)
    }
};
setInterval(() => {
    $("#time_now").text(new Date())
}, 1000);